import { Input, NavBar } from "antd-mobile"
import { useState } from "react"
import styles from "./index.module.scss"
import { TextArea } from "antd-mobile"

type Props = {
  onClose: () => void
  type: "" | "name" | "intro"
  value: string
  onUpdateProfile: (type: "name" | "intro", value: string) => void
}
const EditInput = ({ onClose, value, onUpdateProfile, type }: Props) => {
  const isName = type === "name"
  const [inputValue, setInputValue] = useState(value)
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        right={
          <span
            className="commit-btn"
            onClick={() => {
              if (type === "") return
              onUpdateProfile(type, inputValue)
            }}
          >
            提交
          </span>
        }
        onBack={onClose}
      >
        编辑{isName ? "昵称" : "简介"}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isName ? "昵称" : "简介"}</h3>

        <div className="input-wrap">
          {isName ? (
            <div className="input-wrap">
              <Input
                value={inputValue}
                onChange={(value) => setInputValue(value)}
                placeholder="请输入"
              />
            </div>
          ) : (
            <TextArea
              className="textarea"
              placeholder="请输入内容"
              value={inputValue}
              onChange={(value) => setInputValue(value)}
              rows={4}
              maxLength={100}
              showCount
            />
          )}
        </div>
      </div>
    </div>
  )
}

export default EditInput
